If you are involved in JavaScript programming, whether you're in college or working with people who have extensive experience with React, including exceptional professors and lecturers, don't be surprised if you hear statements like: “ReactJS is the best JavaScript framework!” ReactJS or React.js are just names for the same thing, which is React. Sometimes developers use these names to precisely indicate that React is used for Internet applications, but React is not a framework. React is an open-source JavaScript library used to create interfaces. It is mainly used for web interfaces, but you can also use React to create interfaces for other devices.
However, if we are talking about React Native, then we are talking about a framework that uses the React library to create mobile applications. The working principles of React Native are almost identical to React, except that React Native does not manipulate the DOM - Document Object Model via the Virtual DOM. It runs in a background process, using JavaScript directly on the end device. We will discuss React Native in a future tutorial on this blog, but for now, I hope we have clarified what React is and that things are much clearer to you. It's true that React is developed by Facebook, Instagram, and the community, but its creator is Jordan Walke, a software engineer at Facebook.
One thing is for sure: when you call that component, you won't need to refresh the web page. React allows you to make changes to the page while sending only one request to the server, instead of many, as is the case with PHP, Django, or the Java programming language. Just imagine how long you would have to wait and refresh each web page for every click on Facebook if Facebook didn't use React! Another point in favor of React's simplicity is the fact that it is divided into only two main APIs: the React Component API, which is responsible for parts of the web page displayed by React DOM, and React DOM, which is responsible for rendering on the web page. Everything else is just details!
Getting started with React, how to start learning React?
You might be wondering if you need to know JavaScript to start learning React. The answer is no, but then it's learning the hard way. We recommend that you first get to know JavaScript as much as possible, but also to get to know Node.js a little before diving deeper into React. Then, also decide which operating system you want to use? We will use Linux, Ubuntu. Because we assume that whatever you build, most web projects end up on a leased Ubuntu Server. Although as far as React is concerned, it won't have any significant impact on learning. If you already use the Windows operating system, but want to use Ubuntu; then watch the following video how to install it on VMware Workstation Player 17 or newer virtual machine.
manuel@manuel-virtual-machine:~$
sudo apt-get update
manuel@manuel-virtual-machine:~$
sudo apt-get upgrade
manuel@manuel-virtual-machine:~$
node --version
v18.15.0
If on the official page of Node.js, on the button LTS -
Long Term Support; you don't have the same version as yours or you don't have
Node.js installed at all or your Node.js is an older version; then reinstall
Node.js. If you don't know how to install Node.js, watch the following video.
manuel@manuel-virtual-machine:~$
mkdir react_tutorial
manuel@manuel-virtual-machine:~$
cd react_tutorial
manuel@manuel-virtual-machine:~/react_tutorial$
mkdir lesson1
manuel@manuel-virtual-machine:~/react_tutorial$
cd lesson1
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$
code .
Also, to note, you can use whatever IDE you want, but we
use Visual Studio Code. If you don't have Visual Studio Code installed, watch the
video on how to install it.
- ES7 React/Redux/GraphQL/React-Native snippets
- ES7 + React/Redux/GraphQL/React-Native snippets
- Simple React Snippets
- ESLint
- React PropTypes Intellisense
- Prettier – Code formatter
If you have installed the mentioned extensions. Close Visual Studio Code, so that the changes you installed take effect, and then reopen it.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ code .
Open the Terminal Panel in Visual Studio Code. Type the following command. Pay attention to the npx and not the npm command where beginners often make mistakes.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app helloworld
Confirm the installation and wait for some time for everything to install. When everything is installed, see in the Explorer Panel what everything has been created for you.
manuel@manuel-virtual-machine:~/react_tutorial/lesson1$
cd helloworld
manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$
npm start
If port 3000 is busy for any reason, confirm with y to
open a page on the browser on another port. Npm will probably choose port 3001
automatically for you. It will launch your default browser and then you will
see the following web page indicating that you have done everything
successfully.
Back in Visual Studio Code, click Terminal Panel. If you want to stop the server, press CTRL + C on your keyboard. In the Explorer Panel, click on the src directory of your project. Then create a components folder in it, and in that folder create a new file and name it Helloworld.jsx Note that the name of this file should have the first letter capitalized. In the Helloworld.jsx file, type the following JavaScript code. Instead of my name, put yours!
function Helloworld() {
return <h1>Hello World, from Manuel!</h1>
}
export
default Helloworld;
Then import it into the App.js file, so that it determines where and how it will be displayed on your index.html page. Then edit this file. First add the following import to it.
<Helloworld />
</div>
manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$ npm start
A browser will open with a similar result depending on your name.
You can see what all this looks like in the following video.
React - 1. How to create your first React app?
No comments:
Post a Comment