How to build a website with React

So, you want to build a website with React? Great choice! React helps you make cool, interactive websites. This guide will show you how to do it, step by step.

Why React?

Why pick React? Here's why it's a popular choice:

• Think of it like LEGOs. React uses "components." You can reuse these LEGO-like components everywhere, making your code easy to manage.
• Super fast updates. React uses a "virtual DOM." What's that? It’s like a draft copy of your website. React updates the draft first, then quickly changes the real website. That makes your site load faster.
• Tell React what you want. You just describe how you want your website to look. React figures out how to make it happen. Easy!
• Tons of help online. Lots of people use React. If you get stuck, you can find answers fast.
• Works on phones, too! You can even use React to make apps for phones with something called React Native.
• Good for Google. React websites can be set up so Google can easily find them.

Get Your Tools Ready

Before you build, you need a few things. Here's what you need:

1. Node.js and npm (or yarn). Think of these as your toolbox. They help you manage all the little pieces of your React website. Go to nodejs.org to download and install it.
2. A good text editor. This is where you'll write your code. Visual Studio Code is a great choice. It’s free and has lots of helpful tools.
3. Create React App. This is a magic tool that sets up a basic React project for you. Just open your computer's terminal and type this:

npx create-react-app my-website

Change my-website to whatever you want to call your website. This creates a new folder with everything you need to get started.

Now, go into that folder:

cd my-website

And start your website:

npm start

Boom! Your website should open in your browser. You can find it at http://localhost:3000. If you change your code, the website will update automatically!

Look Around: Your Project's Folders

Create React App makes a bunch of folders for you:

• node_modules. This is like a storage room for all the tools your website needs.
• public. This folder holds things like your main webpage (index.html) and pictures.
• src. This is where you'll write most of your code. Inside, you'll find:
  • index.js. This is the main door to your website. It tells React where to put everything.
  • App.js. This is the heart of your website. It holds the main structure.
  • App.css. This is where you make your website look pretty! It controls the colors and fonts.
  • index.css. These are the main styles of your website.
  • logo.svg. This is just the React logo. You can delete it later.
• package.json. This file is like a recipe card. It tells your website what tools it needs.
• .gitignore. This file tells your computer which files not to keep track of.

Make Your First React Thing

Components are like building blocks. Let’s make one that says hello. Create a new file called Greeting.js in the src folder. Put this code in it:

import React from 'react'; function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } export default Greeting;

This makes a component called Greeting. It takes a name and says hello. Now, use it in your App.js file. Change App.js to this:

import React from 'react'; import Greeting from './Greeting'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <Greeting name="World" /> </header> </div> ); } export default App;

This imports the Greeting component and uses it. It gives it the name "World." Save the file. You should see "Hello, World!" on your website!

Make Things Change!

“State” lets your components remember things. “Events” let people interact with your website. Let’s make a button that counts. Make a file called Counter.js in the src folder. Put this code in it:

import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ); } export default Counter;

This makes a counter. When you click the button, it goes up. Now, put it in your App.js file. Change App.js to this:

import React from 'react'; import Greeting from './Greeting'; import Counter from './Counter'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <Greeting name="World" /> <Counter /> </header> </div> ); } export default App;

Save the file. You should see the counter on your website. Click the button. It should count!

Make It Look Good!

React gives you lots of ways to style your website:

• Inline styles. You can put styles right in your code. But it's better to use other ways for big projects.
• CSS stylesheets. Make separate files for your styles. This is the most common way.
• CSS Modules. These keep your styles from messing up other parts of your website.
• Styled Components. These let you write CSS right inside your JavaScript code. It’s super flexible.
• UI Libraries. These give you ready-made buttons and boxes with styles already on them.

Let's style the Greeting component with CSS. Make a file called Greeting.css in the src folder. Put this code in it:

.greeting { color: blue; font-size: 24px; font-weight: bold; }

Now, tell Greeting.js to use this style. Change Greeting.js to this:

import React from 'react'; import './Greeting.css'; function Greeting(props) { return <h1 className="greeting">Hello, {props.name}!</h1>; } export default Greeting;

Save the file. The greeting should now be blue and bold!

Make More Pages!

For websites with more than one page, you need “routing.” React Router helps with this. First, install it:

npm install react-router-dom

Now, set up routing in your App.js file. Change App.js to this:

import React from 'react'; import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; import Greeting from './Greeting'; import Counter from './Counter'; import './App.css'; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <Router> <div className="App"> <header className="App-header"> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> </ul> </nav> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/greeting" element={<Greeting name="World" />} /> <Route path="/counter" element={<Counter />} /> </header> </div> </Router> ); } export default App;

This sets up two pages: Home and About. You can click the links to go between them.

Get Data from the Internet!

Most websites need to get data from somewhere. Let’s get some data from a website and show it. Make a file called DataFetcher.js in the src folder. Put this code in it:

import React, { useState, useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const json = await response.json(); setData(json); setLoading(false); } catch (error) { setError(error); setLoading(false); } }; fetchData(); }, []); if (loading) { return <p>Loading...</p>; } if (error) { return <p>Error: {error.message}</p>; } return ( <div> <h2>Data from API</h2> <p>Title: {data.title}</p> <p>Completed: {data.completed ? 'Yes' : 'No'}</p> </div> ); } export default DataFetcher;

This code gets data from a website. Now, use it in your App.js file. Change App.js to this:

import React from 'react'; import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; import Greeting from './Greeting'; import Counter from './Counter'; import DataFetcher from './DataFetcher'; import './App.css'; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <Router> <div className="App"> <header className="App-header"> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/data">Data</Link></li> </ul> </nav> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/greeting" element={<Greeting name="World" />} /> <Route path="/counter" element={<Counter />} /> <Route path="/data" element={<DataFetcher />} /> </header> </div> </Router> ); } export default App;

Save the file. Now, if you go to /data, you should see data from the internet!

Show It to the World!

When you're done building, you need to put your website online. Here are some places you can do that:

• Netlify. Super easy to use. Great for React websites.
• Vercel. Another fast and easy choice.
• GitHub Pages. Free if your code is on GitHub.
• AWS (Amazon Web Services). More complicated, but powerful.
• Heroku. Another option for running web apps.

Here's how to put your website on Netlify:

1. Sign up for a Netlify account.
2. Install the Netlify tool: npm install -g netlify-cli
3. Build your website: npm run build
4. Put it online: netlify deploy --prod

Netlify will walk you through the steps. Soon, your website will be live!

Help People Find Your Website!

SEO (Search Engine Optimization) helps people find your website on Google. Here's what to do:

• Make Google see your content. Use something called "Server-Side Rendering" (SSR). Next.js can help with this.
• Tell Google what your website is about. Use "meta tags" for the title and description.
• Give Google a map of your website. This is called a "sitemap."
• Tell Google which pages not to look at. Use a "robots.txt" file.
• Make your website fast! Optimize your images and code.
• Use good HTML. Use tags like <article> and <nav>.
• Make it work on phones! Most people use phones to browse the web.

Keep Learning!

This guide showed you the basics. But there's always more to learn! Here are some good places to learn more:

• The official React website. It has great documentation.
• React tutorials. The React website has a good tutorial.
• Online courses. Check out Udemy, Coursera, and edX.
• Blogs and articles. Lots of people write about React.
• Online communities. Ask questions and share what you learn.

You Did It!

Building a website with React is fun! You can make really cool things. Keep learning, and you'll be a React pro in no time. Have fun coding!