Hello, how’s life?
This time, I’d like to introduce you and refresh a bit of basics about React
We’ll look into things like
- What is React?
- Who uses it?
- How to use it
And then we’ll figure out where to learn it
All right - time for the intro
What is React?
React is a library for Javascript and Typescript, created to simplify the process of web-app creation.
It was originally made by Meta (formerly facebook), yet at the moment it’s maintained by the community
In React, as developers, we create and organize components, which then are rendered. It also allows us to implement TDD principles in our projects and create unit tests with react testing library React has it’s official webiste located under https://react.dev - there you can find everything about it
How to run a piece of code in it?
Actually, there are 2 paths to go
- Set up your own webpack and babel configs - configure your runtime manually
- Use create-react-app package - run preconfigured runtime
To create such React project, let’s choose the second method
$ npx create-react-app my-app
Then, we’ve got 2 important directories - src
and public
In public
, we store every static page. Like HTML, favicons, robots.txt
or some more HTML
src
however is a place for our react components and tests.
Now, when we have everything configured, organised and coded time to run the app!
$ npm start
That’s how we create a development server on localhost for us to use and test our apps there
Now, how can we even write that code? Is it some magic, that no one understands?
Basice code examples
As React is built on components, we have 2 types of them
Functional- a prefered method
function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}
Or class
class Greeting extends Component {
render() {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}
}
As you see, we don’t create HTML elements in typical, JS way.
There are no createElement()
calls, are there?
That’s because React uses JSX. That’s an extension for JS, that improves readability of it. JSX can be treated as HTML template embeded in JS code. These JSX tags are then converted to proper JS code by react
In addition, React can’t render more than 1 element at a time. That’s why we either need to make mess in HTML by adding useless divs and sections or use React fragment
function UserData({ user, email }){
return(
<>
<h1>Hello { user }</h1>
<p>Your email { email }</p>
</>
)
}
There is also a dynamic part of react - Hooks
Wanna store some variables? No worries, that’s what useState
is for.
Or maybe changing something on every component generation? Then useEffect
is your perfect choice.
function App() {
const [times, setTimes] = useState(0);
const click = () =>{
setTimes(times + 1)
console.log(times)
}
useEffect(()=>{
alert("You clicked me")
})
return (
<div className="App">
<h1>You counted {times} times</h1>
<button onClick={click}>Click me</button>
</div>
);
}
Last thing I’ll mention is props passing. Let’s say we want to greet user on our website
Then, we create a greetings compoment
const Greeting = (props) => {
return (
<h1>Hello, {props.name} {props.lastName}!</h1>
);
};
Then, to use it in our app, we pass those props just like HTML attributes. But in JSX
const App = () => {
return (
<div>
<Greeting name="John" lastName="Smith" />
<Greeting name="Ava" lastName="Davis" />
</div>
);
};
Now, you’ve seen a little React. But where to learn more?
Amazing sources
The best source I can recommend is React’s documentation. In well structurised modules, you’ll find everything you need
If you don’t feel confident enough with english, React has it’s docs translated into other languages and fair ammount of in-progress translations
In addition. I’ve also heard that Brian Holt’s course is great.
This Github repository stores fair amount of free courses as well If you know some more, share them in the comments and I’ll append them right below
Conclusion
Thanks for reading. I hope you’ve enjoyed it and are a little bit familiar with it now
Every feedback is appreciated. Share it in the comments
Also, check out other posts such as
- When less is more: Understanding void elements in HTML.
- Ajax & Fetch - combining PHP and Javascript for infinite scroll
- Cleaning spaghetti in PHP
Or just look for something random
That’s it. Again thanks for reading and see you next time