💀 Challenge of the day

👋 My name is Göker

We are starting to shape the project with React. First, I examined the files that came with the React installation. I cleared the App.css and App.js contents. I wrote the following codes to lay the foundations of the project in App.js

Although the view is similar to the HTML language, it is the js language called JSX. To understand that it is different from HTML language, we can note that the class was created by typing "className".

The first letters of Header, Container, Day1, and Footer are capitalized. This indicates that they are JS files. So we need to create a js file for four items. There is Day1 in the container. It must have a different structure than others. Below we see the structures.

The structure of "children" has been added to the container function. In this way, Container content in App.js can be taken from another js file. We must export all js files. These js files need to be imported in App.js to work in App.js.

We create js files for homes, projects, contact pages in Header and Footer.

To avoid confusion, we put pages and components in separate files. We update the addresses of the files we have changed in the codes.

We import the day1.js file so that Day1 appears on our home page.

We import the js files of the pages we want in App.js into App.js. We are now ready to quickly switch between our pages using react-router.

Creating The Basic Building Stones Of A React Website

I’m not using medium or dev.to because maintaining this personal blog is also a part of my learning process. 🤞

<>Hello World!</>