Simple guide to help you start your React journey
We’ll go through the steps to initialize a React project (No TS) using Vite.js.
Install Node.js:
Create a new project:
Open your terminal and run the following command to create a new project:
npm create vite@latest my-react-app --template react
Replace my-react-app with the desired project name.
Make sure to select the proper options when running the command.
cmd or git bash.Sometimes either won’t allow the use of arrow keys for selection.
If you select any other option, remember that the simplest soltion at this point can be to start over.
Navigate to your project directory:
Once the project is created, navigate to the project directory:
cd my-react-app
Install dependencies:
Install any necessary dependencies using npm.
npm install
Start the development server:
Now, start the development server:
npm run dev
This command will start the Vite development server.
You should be able to see your new React app running at http://localhost:$PORT.
Change the $PORT space to adjust to the port vite.js just gave you.
(It’s always on display on your terminal)
Inspecting the project
You can now start inspecting your project!
src directory, and you’ll find an App.jsx file.Below is the directory structure for our React project initialized with Vite.js. If you are missing any directories make sure to create them for future use
/root
│
├── /public
│ ├── /images
│
├── /src
│ ├── /Components
│ ├── /assets
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
│
├── README.md
├── index.html
├── package.json
└── vite.config.js
As with any project using vite, the moment you init, a directory is created.
It’s Important to identify the structure of the project inside this root directory.
It’s where all the magic happens & where the rest of the development will occur.
/root isn’t really called root.
/public is a directory that’s visible to the end-user if inspected.
/images should be inside the /public directory./src is the main directory for our entire project.
/Components will host all of the necessary .jsx component files.App.jsx is the main file to host all of the application’s main components.
App.css and it’s structure will vary depending on how the project’s styles are managed. Different frameworks work with different methods, and the source to make a decision regarding style handling inside our React application comes from it’s requirements.
index.css is a simple yet efficient css file just like any other.main.jsx is a simple yet important .jsx file.
App.jsx file to the always required index.html.Keep fidgeting with the rest of the files. Try to figure out what’s going on inside and study the code already in them. It’ll be important later.
React is sometimes called a framework and sometimes a library. If you’re still confused, read the Docs. Vite has as much to do with React as a pirate has to do with a boat. A boat can very well be sailed without a pirate, but toss a pirate into the mix and suddenly there’s a quest for buried treasure, a catchy sea shanty, and a parrot squawking unsolicited coding advice from the crow’s nest.
Anyway, Vite is the place that starts the sailing,
but the pirate is ultimately the one responsible for looting the british army
and getting all the treasure.
You can start your development journey without vite. In fact, its what companies do out there in the real world since they have plenty more freedom to customize their project, and only have what they’ll really need in order to make their application work. This optimizes their development environment, as well as their final product. Since this is a test, we won’t be going that route as you might’ve noticed.
React alongside several modules will give us necessary tools to develop
(and build) a small stable application to showcase what we’ve learned.
What makes the magic happen is the way React implements Components. Small dynamic and modular pieces that allow for reusable and clean code. Keeping our app size relatively small. Components can interact with one another if our code allows them to. Which is what we’re ultimately aiming for; simple, reusable, clean, scalable code.
The DOM, as you should know by now, works in a similar structure to a tree. It has nodes and links that bind these nodes together in a tree-like structure. Each node represents an html element, with it’s attributes, classes, id, etc.
DOM Tree:
body
├── header
│ ├── logo
│ └── nav
└── main
├── section
└── footer
VDOM Tree:
body (v1)
├── header (v1)
│ ├── logo (v1)
│ └── nav (v2)
└── main (v1)
├── section (v2)
└── footer (v1)
React operates with both the real DOM and a Virtual DOM (VDOM). The VDOM is an abstract representation of the DOM tree, which React utilizes to track changes in the state of nodes efficiently. The state of a node can vary from simple interactions like clicks, to substantial changes such as navigating to a different route within the application.
For managing significant state transitions or routing, additional libraries like React Router are often employed. However, for smaller state changes, React provides ample control over how state is managed and component state handling. This is where the Virtual DOM shines.
Every component in React has a state, and theoretically, a component can host an arbitrary number of child components, similar to how a DOM node can contain several other nodes.
Consider a scenario where a user is navigating through a contact list, viewing 15 contacts at a time. Should the entire application reload with every click to view the next set of contacts? Or should only the contact list update? Well, the next time the user wants to check the list of users they’ve blocked over a heated argument about which k-pop idol is better, they’re going to find themselves interacting with good user experience.
This comparison process is known as reconciliation, and is crucial for React’s performance optimization. It’s managed by a library called ReactDOM, which handles rendering React components to the DOM and updating them efficiently when the state or props change.
To simplify things, React can use html node elements inside javascript functions and classes.
To be more precise, it doesn’t do that at all. How react actually works is by implementing a special kind of syntax called JSX. This syntax allows the use of what seems like html elements inside javascript, but in reality its an extension of the usual javascript syntax with XML elements enabling for an intuitive and readable structure for defining UI.
html and xml tags.javascript logic and make interactive dynamic and reusable components by wrapping variables or js snippets in {}.React.createElement() function calls.Some JSX example:
// declare a component which returns the jsx data
const component = (
<div>
<h1>Hello, pirate!</h1>
<p>Can you eye the difference between html and jsx?</p>
</div>
);
// Uses magic functions and renders inside the root element of an html document.
ReactDOM.render(component, document.getElementById("root"));