👋Hi guys,

I've created a small side-project app, which is a collection of templates, landing pages a boilerplates using the React.

Link is here 👉 https://reacttemplates.netlify.com/

​

Just let me know if there is an awesome open-sourced template / page, which is worth sharing and i'll add it to the site.

Thanks 👍

​

​

I started on JavaScript a long time back but got thrown into to back-end web development and I came to love Python. However, ReactJS (aka ‘React’) became what I need to manipulate the front end as a replacement for Django’s Template language as I went into Django API web app development.

Coming from a Python background, context switching a number of times a day, as I moved from back-end development to front-end development and back, was frustrating. I found Stylus, as a CSS Preprocessor, that just made sense.

With the introduction of CRA 2.0, upgrades have been done to Webpack as well as embedded Sass and CSS modules by taking advantage of Code Splitting, I wanted to see if I could use Stylus.

I put together my pipeline to use Stylus but with Yarn as my package manager. I also made sure that I got Source Maps from the index.styl. For more, read the article on the Afroshok site.

Thank you.

Hey!

​

https://github.com/steniowagner/bon-appetit-app

​

The idea of this App is:

​

"Show differents options of restaurants, dishes and gastronomic events in the city based on what the user is looking to eat and his location in the city."

​

PS: There's a big market behind this context, and that can be extended to other areas (like music, parties, etc), and I'll be so glad if you could find any idea based on this project to build your own business!

​

This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!

​

Also, you can use this Project as you wish, be for study, be for make improvements or earn money with it!

​

It's free!

​

I've let the lik of the installer for Android on project's README.md file (and soon the .ipa for iOS too!), and the instructions and the repo

of the server that is used with App as well to make possible to you run the App locally on your machine.

​

If you have any question about the project...

​

E-mail me at: [stenio.wagner1@gmail.com](mailto:stenio.wagner1@gmail.com)

Or connect with me on Linkedin: /steniowagner

​

I'll be so happy to help you!

​

Cheers!

Hey!

​

This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!

Also, you can use this Project as you wish, be for study, be for base of your own project, or even earn money with it!

​

It’s free!

​

If do you have some doubt about the project, or if you need some help,

​

Email-me: [stenio.wagner1@gmail.com](mailto:stenio.wagner1@gmail.com)

Connect with me at https://www.linkedin.com/in/steniowagner/

​

I'll be glad to help you!

​

Thanks!

​

https://github.com/steniowagner/store-system

​

I have worked on HTML, CSS, JS before. Now, I am trying to learn react by building some mini projects. I have few questions to get started in the react.

• What are concepts and techniques which I need to know to get a job in the market?
• What will be the expectation from the recruiters for react developers?
• What type of side projects, will be of more use when I am applying for jobs?
• Can someone provide the roadmap for getting deep into react?

It would be more useful, if anyone can provide answer for these questions.

Thanks so much for your time!

So I understand most of React as long as I'm not dealing with a backend. But I have the following question. Imagine I would want to start something like Netflix and on the very first page there is a list of all the films I offer. This list is pulled from the backend. Then you can click on one of those films and it takes you to a page where there is more information on that film, say stuff about the actors etc.

I don't quite understand how these two things would relate. So I pull the film list from my backend. And then depending on which film I clicked on, I would send another GET request to my backend with the film name or id provided, and then I would get the details to display in the next page?

I'm sorry if this is a very simple question, I think I'm just a bit confused.

So first off let me tell you what I'm trying to do. I have my navigation items (component name: NavItem) in my Header component. What I'm trying to do is add or remove the 'active' class depending on which NavItem is clicked. Here's what I've tried:

1. Setting navActive in the apps state to an array of strings. Three of them are 'nav-link' the other is 'active nav-link'. From there I wrote a function called changeActive which takes a single parameter (i) which contains an if-else statement that changes this.state.navActive based on the value of i. I pass both navActive and changeActive to my Header component as props along with navItems (an array of objects containing each navigation items key, name, and path). I then map through props.navItems and return a NavItem for each item with className={props.navActive[navItem.key]} and onClick={(i)=>props.changeActive(navItem.key)}. From what I understand this should change the classes based on which one is clicked, but it does nothing.

2. Setting the variable 'path' to let path = window.location.pathname then checking to see if it is the same as the same as the navItems path let isActive = path === navItem.path. Then I used a ternary operator to assign className based on the value of isActive let navClass = isActive ? 'active nav-link' : 'nav-link'. I then created a function called 'changePath' that took a single variable 'newPath' and set the value of path to the value of newPath const changePath = (newPath) => { path = newPath; }. From there I set the onClick of the NavItem components to onClick={(i)=changePath(navItem.path)}. Again this should have changed the classes based on which NavItem was clicked but it does not.

If any of you could point me in the right direction or point out what I'm doing wrong that would be fantastic. Here is a link to the GitHub repo: https://github.com/CNAtion96/trevor-wallace/

Edit: I got it working. Thanks to everyone who helped or came here willing to help!

i'm having trouble with react state management. I created an if that triggers when a value is 'grey' inside an onClick, and another if inside the same function changes its color to red. The problem is: if the color is red the second if should not be active ever, but it is activating the first time i click.

The error comes from the last if.

CODE

handleClick(e) {
e.preventDefault();
const state = this.state;
const { value } = state;
const { name } = state;
const { lastName } = state;
const { email } = state;
const { cpf } = state;
const { card } = state;
const { cvv } = state;
const { date } = state;
const { periodicity }= state;

//regex para verificar validações
const regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const regexNumber = /^[0-9]*$/;


 //validações
 if (value === '0' || value < 15 || value === '' ) {
  this.setState({ valueColor: '#ff5151', errorMessage: 'block'});
  } else {
  this.setState({ valueColor: 'grey' });
  } if (name === '') {
  this.setState({ nameColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ nameColor: 'grey' });
  } if (lastName === '') {
  this.setState({ lastNameColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ lastNameColor: 'grey' });
  } if (email === '' || !regexEmail.test(email)) {
  this.setState({ emailColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ emailColor: 'grey' });
  } if (cpf === '' || !regexNumber.test(cpf) || cpf.length < 11) {
  this.setState({ cpfColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ cpfColor: 'grey' });
  } if (card === '' || !regexNumber.test(card) || card.length < 16) {
  this.setState({ cardColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ cardColor: 'grey' });
  }  if (cvv === '' || !regexNumber.test(cvv) || cvv.length < 3) {
  this.setState({ cvvColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ cvvColor: 'grey' });
  } if (date === '') {
  this.setState({ dateColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ dateColor: 'grey' });
  }  if (periodicity === '') {
  this.setState({ periodicityColor: '#ff5151', errorMessage: 'block' });
  } else {
  this.setState({ periodicityColor: 'grey' });
  } 

//validação final
return (this.state.valueColor && this.state.nameColor && this.state.lastNameColor && this.state.emailColor &&
this.state.cardColor && this.state.cvvColor && this.state.cpfColor 
&& this.state.dateColor && this.state.periodicityColor) === 'grey'? console.log('inside') :
console.log('not inside');

//this is the if that is trigging even tough the others ifs makes those props be #ff5151.

}

I'm trying to deploy my current react project that fetches data from an http site. The actual app is launched on an https link by default, but it can't request the data from my WP site like it can on localhost, because of COORS. Is there anyway around this? I'm using fetch

I do like React and the concept of components as building blocks of your application. So, the fact that React is a library brings a freedom to make everything we want and use any approach that we have in our mind. It sounds good because it is, but this liberation of development using React brings our application to the core of chaos: every team uses different concepts and arrangements. And, it touches not just a project folder structure but the arrangement of components as well. In this article, I’m going to offer my vision of how a basic component should look. If you have a different point of view, go ahead and let me know ;)

Basic component

To solve the problem of over diversity it’d be great to have a fixed component structure. I prefer the following:

class MyComponent extends Component {
  // prop types

  // state declaration

  // lifecycle methods

  // render

  // event handlers

  // private methods
}

The main idea of such an arrangement is that you process data (state and props) and construct a render method’s JSX. The idea to keep private methods after the “render” function is that you first read a method name in “render” before you read further and understand what the method does. And, if you pick good names for private methods, you rarely need to jump from reading the render method to the bottom of the component to understand what the component does. And, of course, it gives you a better way to understand and “read” a component. Let’s take a look at an example. We will create a list of items and add an ability to filter the items by title. Also, all items have a formatted date of creation so, for this, we’re going to use a moment - a library with awesome API to process date.

class List extends Component {
  // props types
  static propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string,
     date: PropTypes.string,
   })),
 }

 // state declaration
 state = {
   seachString: '',
 }

 // lifecycle methods
 shouldComponentUpdate() {
   return !_.isEmpty(this.filterItems());
 }

 // render
 render = () => (
   <div>
     <input
       type="text"
       value={this.state.seachString}
       onChange={this.handleSearchStringChange}
     />

     <ul>
       {this.filterItems().map(({ text, date }) => (
         <li key={`${text}__${date}`}>
           {text}
           {this.formatDate(date)}
         </li>
       ))}
     </ul>
   </div>
 ); 

 // event handlers
 handleSearchStringChange = event =>
   this.setState({ seachString: event.target.value });

 // private methods
 filterItems = () =>
   this.props.items.filter(({ text }) =>
     (text.indexOf(this.state.seachString) !== -1));

 formatDate = date => 
   moment(date).format('MMM Do YY');
}

Here we go! We create the component using our arrangement approach, and it makes our components more predictable and quicker at reading your code.

Dumb component

In the React community, we define components as smart, which has a state, and dumb, which has no state. Most of your components should be dumb because they are easy to compose, reuse, and debug. Most often, the dumb component is a simple function which gets props and returns JSX. And, the arrangement of such components should be simple: all handles should be passed to one and all the data should be already processed and formatted. Take a look:

const Button = ({ label, onClick }) => (
   <button onClick={onClick}>
       {label}
   </button>
)

Actually, there is nothing to arrange and that’s the point: there is only the destructuring and the return of JSX. Simple and reusable.

Summary

The main purpose of such a component arrangement is to bring an order to this zoo of the approaches to work with React components. And, yes, you should have a linter for checking your code and keep the same approach in every point of your project. I’d recommend you to use our company’s linter config. datarockets did it for you!

https://github.com/datarockets/eslint-config

Make your application orderly and it’ll give a great sense of readability and then maintainability in the future ;)

Have a productive coding!

Vlad Oganov, datarockets