Intro to React.js

Пост обновлен май 31

Getting started with single-page web applications + useful materials.

Most likely you have already developed a few websites using the basic stack and thinking of moving on. You are on the right track, as using JS libraries such as Vue, React or Vanilla will make your development even more interesting!

Personally, I liked the components system of React.js library, as you can reuse them and in general, it makes your code well-structured. Besides, I think that it is the most suitable library for the beginning, as it's not that complicated to start with it! So, let's set up our first application? :)

First of all, let's install React. Open the terminal and write down this:

npx create-react-app my-app

my-app has to be a name of your application.

By running this command, we created a folder with our application. All needed files to start are already there. Let's move here and run our application.

cd my-app
npm start

Great! Now you probably see this, so it means that you successfully built your application:

We can get rid of these basic things by deleting them from the code and writing our own. But first, let me explain what this new structure that you see in the code means.

Let's start with the folder structure. Here we see "src" and this should contain our components and styles for the application. Components folder contains js files with our components, new component => new file.

You also can create a "styles" folder inside of it. This folder follows the new component => new file rule too. For each component, there has to be a separate CSS file and it has to be connected to the component.

Now, let's move to the App.js file. This is the main file here, and we have to connect all our components here.

Don't forget to import your components here too! Otherwise, the file will not see your components and nothing will work. This rule is relevant to each file in the application.

Lastly, let's overview JSX and components.

Component is a function that returns JSX.

There is a small code screenshot from my App.js file as an example for future explanation.

First of all, we see imports of other components/files. But right after we can notice a function with something similar to HTML. It is called JSX. Our components consist of it.

The syntax is similar to basic HTML, but there are some differences such as not a "class", but className. JS is always written right after the function declaration.

Without this line, component can't exist. Export has to be named the same as a function.

exprort default App;

Finally, hope you learned a little bit more about this library and now you can try to make something of your own! There's also help with these useful materials:

https://reactjs.org/ - official documentation with lots of tutorials.

https://reactjs.org/docs/getting-started.html - getting started with React

https://reactjsexample.com/tag/games/ - applications that built with react

Просмотров: 44Комментариев: 0

Недавние посты

Смотреть все