Simple webpage on React.js

Question

I just started to learn React.js and decided to build on of the simpler projects from freeCodeCamp with it. I'm really interested in ways in which this code can be improved.

I can see at least two problems - two components with the exact same logic and different states and not working feature with scrolling to different sections based on href of a link pressed. While I will be able to fix the second one eventually, the first one is more about logic of the code.

So, my main concerns are the logic of the code and style of it. What should be fixed and how?

Here is a link to working code:

Codepen

class Contact extends React.Component { constructor() { super(); this.state = { links: [ "https://www.vk.com", "https://www.github.io", "https://codepen.io" ], icons: [ "http://www.iconninja.com/files/16/107/688/vk-com-icon.png", "http://www.freeiconspng.com/uploads/git-github-hub-icon-25.png", "http://www.iconninja.com/files/695/496/986/black-codepen-icon.png" ] }; } render() { const { links, icons } = this.state; let social = links.map((href, i) => { return ( <a className="social__item" href={href} target="_blank"> <img className="social__img" src={icons[i]} /> </a> ); }); return <div className="social" id="social">{social}</div>; } } class Portfolio extends React.Component { constructor() { super(); this.state = { links: [ "http://kiraburova.github.io/ModernLook/", "http://kiraburova.github.io/passion/", "http://kiraburova.github.io/singolo/", "https://kiraburova.github.io/Kafeinate/" ], images: [ "https://image.ibb.co/chE8xv/1.png", "https://image.ibb.co/kR9K4a/2.png", "https://image.ibb.co/n9niVF/3.png", "https://image.ibb.co/i3PVAF/4.png" ] }; } render() { const { links, images } = this.state; let gallery = links.map((href, i) => { return ( <a className="gallery__item" href={href} target="_blank"> <img className="gallery__img" src={images[i]} /> </a> ); }); return <div className="gallery" id="social">{gallery}</div>; } } class About extends React.Component { constructor() { super(); this.state = { name: "Name", text: "Hello! This is just a sample text" }; } render() { return ( <div className="about"> <h1 className="about__title">{this.state.name}</h1> <p className="about__text">{this.state.text}</p> </div> ); } } class Navigation extends React.Component { constructor() { super(); this.state = { nav: ["About", "Portfolio", "Contact"] }; } render() { let navigation = this.state.nav.map(item => { return <a className="nav__link" href={item}>{item}</a>; }); return <ul className="nav" id="nav">{navigation}</ul>; } } class App extends React.Component { render() { return ( <div> <Navigation /> <About /> <Portfolio /> <Contact /> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); 

Answer 1

Great choice, Allan and good effort! React is awesome and fun. You can improve a few things if you are interested:

1. Separate Presentational and Container Components. This way your app will be easier to scale, read and maintain
2. You can try to have your state in one parent component and pass it as props to its children
3. Extract all components in different files
4. Navigation can be done with React Router. It is very simple to set up and easy to work with
5. Consider learning and using Redux for your React App state when you are comfortable with the basics or React
6. Enjoy learning :)